<template>
	<view class="row_expansion">
		<view :class="['part_title', parameter.showBorder == 2 ? '' : 'has_bor']">
			<view class="expan_title">
				<image v-if="parameter.customSign" class="title_img" mode="widthFix" :src="parameter.customSign" />
				<view v-else-if="parameter.signColor" class="title_sign" :style="{
						'background-color': parameter.signColor
					}"></view>
				<view class="title_name" :style="{ 'font-size': parameter.fontSzie * 2 + 'rpx' }">
					{{ parameter.partTitle || '请输入标题' }}</view>
			</view>
			<view v-if="parameter.linkUrl && parameter.name" class="more_box" @click="groupClick">
				<view class="more_name">{{ parameter.name }}</view>
				<view class="iconfont iconfont-e775"></view>
			</view>
		</view>
		<view v-if="pageData.length > 0" class="row_tab">
			<template v-for="(item, index) in pageData">
				<button v-if="isShow(item.linkUrl)" :open-type="item.linkUrl == 'concat' ? 'contact' : ''" :key="index"
					:style="{ width: (1/(parameter.colNum || 4)) * 100 + '%' }" class="u-reset-button item"
					@click="goItem(item)">
					<view class="icon_box">
						<image mode="aspectFill" v-if="item.image" class="big_icon" :src="item.image" />
						<view v-else :style="{ color: item.color || vuex_config.themeColor1 }"
							:class="['big_icon', 'iconfont', item.icon]"></view>
						<view class="num" v-if="vuex_count[item.linkUrl]">{{ vuex_count[item.linkUrl] }}</view>
					</view>
					<view class="title">{{ item.title }}</view>
				</button>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		userTemplate
	} from './userTemplate.js';
	import {
		mapState
	} from 'vuex';
	export default {
		mixins: [userTemplate],
		computed: {
			...mapState(['vuex_count']),
			isShow(linkUrl) {
				return function(linkUrl) {
					if(this.filterObj[linkUrl]){
						let str = this.filterObj[linkUrl]
						return this[str]
					}else{
						return true
					}
				};
			}
		},
		data() {
			return {
				groupLink: {
					order: '/package/order/list/index',
					oldOrder: '/package/order/oldOrderList/index'
				}
			}
		},
		methods: {
			goItem(item) {
				this.$emit('groupItemGo', item);
			},
			groupClick() {
				this.$login('groupClick').then(() => {
					let url = this.groupLink[this.parameter.linkUrl]
					this.$linkTo(url);
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	@import './index.scss';

	.row_expansion {
		background: #fff;
		overflow: hidden;
		position: relative;

		.part_title {
			padding: 26rpx;
			display: flex;
			justify-content: space-between;

			&.has_bor {
				border-bottom: 1rpx solid #f5f5f5;
			}

			.expan_title {
				display: flex;
				align-items: center;
				height: 40rpx;

				.title_img {
					width: 40rpx;
					margin-right: 20rpx;
				}

				.title_sign {
					width: 6rpx;
					height: 30rpx;
					border-radius: 4rpx;
					margin-right: 20rpx;
				}

				.title_name {
					font-size: 32rpx;
					font-weight: 700;
					color: #333;
				}
			}

			.more_box {
				display: flex;
				align-items: center;
				color: #999;
				font-size: 24rpx;

				.more_name {
					margin-right: 8rpx;
				}
			}
		}

		.row_tab {
			margin: 0 20rpx;
			background: #fff;
			display: flex;
			flex-wrap: wrap;
			padding: 6rpx 0;

			.item {
				padding: 24rpx 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				box-sizing: content-box;
				.icon_box {
					position: relative;

					.num {
						position: absolute;
						top: 0;
						right: 0;
						height: 32rpx;
						width: 32rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						transform: translate(20%, -30%);
						border-radius: 50%;
						overflow: hidden;
						font-size: 10px;
						// border: 1rpx solid;
						// background-color: #ec3f38;
						background-color: var(--color);
						color: #fff;
					}
				}

				.title {
					margin-top: 16rpx;
				}
			}
		}
	}

	/* #ifdef MP-ALIPAY */
	.u-reset-button {
		border: 0;

	}

	.row_tab {
		padding: 10rpx 0 30rpx !important;
	}

	.num {
		top: 32rpx !important;
	}

	/* #endif */
</style>
